<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="news-detail-container">
    <div class="news-detail-content" v-loading="loading">
      <!-- 文章头部 -->
      <div class="article-header">
        <h1 class="article-title">{{ newsDetail.title }}</h1>
        <div class="article-meta">
          <span class="meta-item">
            <i class="el-icon-time"></i>
            {{ newsDetail.time }}
          </span>
          <span class="meta-item">
            <i class="el-icon-view"></i>
            {{ newsDetail.viewCount }} 阅读
          </span>
        </div>
      </div>

      <!-- 封面图 -->
      <div class="article-cover" v-if="newsDetail.img">
        <img :src="newsDetail.img" :alt="newsDetail.title">
      </div>

      <!-- 文章内容 -->
      <div class="article-content" v-html="newsDetail.content"></div>

      <!-- 相关推荐 -->
      <div class="related-news" v-if="relatedNews.length > 0">
        <h2 class="section-title">相关推荐</h2>
        <el-row :gutter="20">
          <el-col 
            v-for="news in relatedNews" 
            :key="news.id" 
            :xs="24" 
            :sm="12"
          >
            <el-card 
              class="related-news-card" 
              shadow="hover" 
              @click="navigateToNews(news.id)"
            >
              <div class="related-news-image">
                <img :src="news.cover" :alt="news.title">
              </div>
              <div class="related-news-info">
                <h3 class="related-news-title">{{ news.title }}</h3>
                <p class="related-news-summary">{{ news.summary }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const newsDetail = ref({})
const relatedNews = ref([])

// 获取资讯详情
const fetchNewsDetail = async () => {
  loading.value = true
  try {
    const newsId = route.params.id
    const res = await request.get(`/homestayNews/detail/${newsId}`)
    if (res.data.code === '200') {
      newsDetail.value = res.data.data
      // 更新浏览量
      updateViewCount(newsId)
      // 获取相关推荐
      fetchRelatedNews()
    }
  } catch (error) {
    console.error('获取资讯详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 更新浏览量
const updateViewCount = async (newsId) => {
  try {
    await request.post(`/homestayNews/view/${newsId}`)
  } catch (error) {
    console.error('更新浏览量失败:', error)
  }
}

// 获取相关推荐
const fetchRelatedNews = async () => {
  try {
    const res = await request.get('/homestayNews/related', {
      params: {
        id: route.params.id,
        limit: 2
      }
    })
    if (res.data.code === '200') {
      relatedNews.value = res.data.data || []
    }
  } catch (error) {
    console.error('获取相关推荐失败:', error)
  }
}

// 日期格式化
// const formatDate = (timeArray) => {
//   if (!timeArray || timeArray.length !== 6) return '';

//   const [year, month, day, hour, minute] = timeArray;

//   // 手动拼接字符串，确保格式为 "YYYY-M-D HH:MM"
//   return `${year}-${month}-${day} ${hour}:${minute}`;
// };



// 跳转到其他资讯
const navigateToNews = (id) => {
  router.push(`/news/${id}`)
  window.scrollTo(0, 0)
}

onMounted(() => {
  fetchNewsDetail()
})
</script>

<style scoped>
.news-detail-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.article-header {
  margin-bottom: 2rem;
}

.article-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  gap: 1rem;
  color: #999;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.article-cover {
  margin-bottom: 2rem;
  border-radius: 8px;
  overflow: hidden;
}

.article-cover img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.article-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}

.article-content :deep(img) {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}

.article-content :deep(p) {
  margin-bottom: 1rem;
}

.related-news {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.section-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1.5rem;
}

.related-news-card {
  margin-bottom: 1rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.related-news-card:hover {
  transform: translateY(-5px);
}

.related-news-image {
  height: 180px;
  overflow: hidden;
}

.related-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-news-info {
  padding: 1rem;
}

.related-news-title {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-news-summary {
  color: #666;
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style> 